<template>
  <a-carousel autoplay>
    <div v-for="banner in banner_list">
      <a :href="banner.link"><img :src="banner.img" alt="" width="100%"></a>
    </div>
  </a-carousel>
</template>
<script>
  export default {
    name: "Banner",
    data() {
      return {
        banner_list: [
          {link: "http://www.baidu.com", img: "/static/banner/1.png"},
          {link: "http://www.baidu.com", img: "/static/banner/2.png"},
          {link: "http://www.baidu.com", img: "/static/banner/3.png"},
        ]
      };
    }
  }
</script>
<style scoped>
  /* For demo */
  .ant-carousel >>> .slick-slide {
    text-align: center;
    height: 506px;
    line-height: 160px;
    /*background: #364d79;*/
    overflow: hidden;
  }

  .ant-carousel >>> .slick-slide h3 {
    color: #fff;
  }
</style>
